<template>
    <div class="people_container">
        <van-nav-bar
                :title="$route.meta.title"
                class="header"
                left-text=""
                left-arrow
                @click-left="backToAddress()"
        >
            <van-icon name="add-o" size="18" slot="right" @click="pushToAdd()"/>
        </van-nav-bar>
        <!-- 80dp -->
        <div class="address">
            <div class="tanBox" v-show="tanBoxShow">
                <div class="tanBoxInfo" @click="addNewOne">
                    <van-icon name="contact" style="margin: 0 10px"/>
                    添加联系人
                </div>
            </div>

            <div class="maiPart">
                <!--<van-search-->
                <!--v-model="searchFriend"-->
                <!--placeholder="搜索联系人"-->
                <!--input-align="center"-->
                <!--/>-->
                <!-- 这里是通讯录列表 -->
                <div class="botbox">
<!--                    <div class="addressjtemdiv" @click="toInfo('')" style="height: auto;">-->
<!--                        <div style="height: 100%;width:4rem;margin:0 1rem; ">-->
<!--                            <img-->
<!--                                    style="height: 3.5rem;width: 3.5rem;padding: 0.25rem; border-radius:50%;"-->
<!--                                    src="img/headimg/head_icon_1.png"-->
<!--                                    alt-->
<!--                            />-->
<!--                        </div>-->
<!--                        <div style="flex:1;display:flex;flex-direction:column">-->
<!--                            <div style="font-weight: bold">-->
<!--                                <div style="float:left">平台</div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
                    <van-index-bar>
                        <div v-for="item in addresslist" :key="item.key">
                            <van-index-anchor :index="item.key"/>
                            <div class="addressjtemdiv" v-for="jtem in item.data" @click="toInfo(jtem)" :key="jtem.key">
                                <div style="height: 100%;width:4rem;margin:0 1rem; ">
                                    <img
                                            v-if="jtem.name == '本机'"
                                            style="height: 3.5rem;width: 3.5rem;padding: 0.25rem; border-radius:50%;"
                                            src="img/headimg/head_icon_1.png"
                                            alt
                                    />
                                    <img
                                            v-else-if="jtem.name !== '本机'&&jtem.machinetype=='普通机'"
                                            style="height: 3.5rem;width: 3.5rem;padding: 0.25rem; border-radius:50%;"
                                            src="img/headimg/head_icon_2.png"
                                            alt
                                    />
                                    <img
                                            v-else-if="jtem.name !== '本机'&&jtem.machinetype=='指挥机'"
                                            style="height: 3.5rem;width: 3.5rem;padding: 0.25rem; border-radius:50%;"
                                            src="img/headimg/head_icon_3.png"
                                            alt
                                    />
                                    <img
                                            v-else
                                            style="height: 3.5rem;width: 3.5rem;padding: 0.25rem; border-radius:50%;"
                                            src="img/headimg/head_icon_4.png"
                                            alt
                                    />
                                </div>
                                <div style="flex:1;display:flex;flex-direction:column">
                                    <div style="font-weight: bold">
                                        <div style="float:left">{{ jtem.name }}</div>
                                    </div>
                                    <div style="display:flex; font-size: 0.8rem;color:#999">
                                        <div>北斗卡号：{{ jtem.id }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </van-index-bar>
                </div>
                <!-- {{addresslist}} -->
            </div>

        </div>

    </div>
</template>
<style scoped>
    .people_container {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .header {
        background-color: #03192b;
        color: white;
    }

    /deep/.header .van-nav-bar .van-icon {
        color: white;
    }
    /deep/.header .van-nav-bar .van-nav-bar__title {
        color: white;
    }

    .address {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .address .tanBox {
        color: black;
        position: fixed;
        top: 45px;
        z-index: 999;
        right: 5px;
        width: 8rem;
    }

    .address .tanBox .tanBoxInfo {
        line-height: 30px;
        font-size: 16px;
        margin: 10px 0;
    }

    /deep/ .van-nav-bar .van-icon {
        color: white;
    }

    /deep/ .van-nav-bar .van-nav-bar__title {
        color: white;
    }

    .underbox {
        display: flex;
        flex-direction: column;
    }

    /deep/ .underbox .van-tabbar-item {
        color: #999999;
    }

    /deep/ .underbox .van-tabbar-item--active {
        color: #153744;
        background-color: #fff;
    }

    .maiPart {
        width: 100%;
        background-color: lightgray;
        height: auto;
        overflow-y: auto;
        display: flex;
        flex-direction: column;

    }

    .searchPanel {
        display: flex;
        width: 50%;
        position: relative;
        top: 20px;
        margin-left: 25%;
    }

    /* 引用样式 */
    .botbox {
        flex: 1;
        overflow-y: auto;
        /*color: #000;*/
        /*color: white;*/
    }

    .van-popup--center {
        width: 80%;
        left: 48%;
        height: 50%;
        top: 40%;
        -webkit-transform: translate3d(-50%, -50%, 0);
        transform: translate3d(-50%, -50%, 0);
    }

    .addressjtemdiv {
        display: flex;
        height: 100%;
        align-items: center;
        border-bottom: 1px solid #eee;
        /*background: #fff;*/
        /*background: #0a3165;*/
        background-color: white;
        padding-right: 0.25rem;
    }

    /deep/ .van-index-anchor {
        z-index: 1;
        box-sizing: border-box;
        padding-left: 1.5rem;
        color: #323233;
        font-weight: 500;
        font-size: 14px;
        line-height: 32px;
        /*background-color: rgba(21, 55, 68, 0.1);*/
        background-color: #f5f5f5;
    }
    /deep/.van-index-bar__index{
        padding: 0 16px 0 16px;
        line-height: 20px;
        color:#333;
        font-weight: bold;
        font-size: 14px;
    }
</style>
<script>
    import {getPeopleList} from "../../request/api";
    import {getChineseHeadLetter} from "../../utils/pinyin";

    export default {
        data() {
            return {
                testData: 1,
                testData2: 2,
                input: '',
                addresslist: null,

                //引用变量
                tanBoxShow: false,
                searchFriend: '',

                active: 1,
                addresslist: null,
                notfound: true,

            }
        },
        methods: {

            pushToAdd(){
                this.$router.push("/addmember");

            },

            backToAddress(){
                this.$router.push("/chatlist");
                window.active = 'chat';
                window.active = 1;
            },

            getAddressList() {
                this.addresslist = [];
                let res = $App.findAllPerson();
                this.addresslist = this._parseData(JSON.parse(res));

                if(this.addresslist.length){
                    this.notfound = false;
                }

                // getPeopleList({ztlx: 1}).then(res => {
                //     console.log(res.data.rows)
                //     this.addresslist = this.parseJsondata(res.data.rows);
                //     console.log(this.addresslist)
                //     if (this.addresslist.length) {
                //         this.notfound = false;
                //     }
                // }).catch(e => {
                //     console.log(e);
                // });


            },
            jumpPage(url) {
                this.$router.push(
                    {
                        path: url
                    }
                )
            },
            //查看群组列表
            _parseData(r) {
                let data = [];
                let chars = [];
                //生成a-z的数组
                data.push({ key: "0-9", data: [] });
                for (let i = 65; i <= 90; i++) {
                    let key = (String.fromCharCode(i));
                    data.push({"key": key, data: []});
                    chars.push(key)
                }
                data.push({ key: "其他", data: [] });

                // address.dealdt = data;
                //填充数据
                r.forEach(o => {
                    data.forEach((item, index) => {
                        let a = o["szm"]; //name属性
                        if (item.key === a.toUpperCase()) {
                            data[index].data.push(o["person"]);
                            console.log(a.toUpperCase());
                        }
                        if (item.key === "0-9") {
                            let reg = new RegExp("^[0-9]$");
                            if (reg.test(a)) {
                                data[index].data.push(o["person"]);
                                // console.log('a:' + a);
                                // console.log("person:" + o['person']);
                            }
                        }
                        if (item.key === "其他") {
                            let reg2 = new RegExp("^[a-zA-Z0-9]");
                            // debugger
                            if (!reg2.test(a)) {
                                data[index].data.push(o["person"]);
                                // console.log('a:' + a);
                                // console.log("person:" + o['person']);
                            }
                        }
                    });
                });
                let finalData = []
                for (let i in data) {
                    if (data[i].data.length > 0) {
                        finalData.push(data[i])
                    }
                }
                return finalData // 返回通讯录数组
            },
            parseJsondata(r) {
                let data = [];
                let chars = [];
                //生成a-z的数组
                for (let i = 65; i <= 90; i++) {
                    let key = (String.fromCharCode(i));
                    data.push({"key": key, data: []});
                    chars.push(key)
                }
                //填充数据
                r.forEach(o => {
                    data.forEach((item, index) => {
                        let a = getChineseHeadLetter(o['ztmc']);//name属性

                        if (item.key === a.toUpperCase()) {
                            o.id = o.bdid;
                            o.name = o.ztmc;
                            data[index].data.push(o);
                        }
                    })
                });
                let finalData = []
                for (let i in data) {
                    if (data[i].data.length > 0) {
                        finalData.push(data[i])
                    }
                }
                return finalData // 返回通讯录数组

            },

            //
            changeTanBoxShow() {
                this.tanBoxShow = !this.tanBoxShow;
            },
            //添加新朋友
            addNewOne() {
                this.$router.push(
                    {
                        // path:'/addfriend'
                        path: '/addMember'
                    }
                )

            },
            //查看联系成员详情
            toInfo(data) {
                console.log(data)
                let tmpData = data;
                if (data == '') {
                    tmpData = {
                        bdid: "",
                        gd: "",
                        id: "",
                        jd:"",
                        name: "平台",
                        sd:"",
                        sj:"",
                        wd:"",
                        xh:"",
                        zdmc:"",
                        zdmm:"",
                        ztlx: "",
                        ztmc:"",
                        zxzt:""
                    }
                }
                this.$router.push({
                    path: "/memberinfo",
                    query: {
                        data: data
                    }
                });

                // this.$router.push({
                //     path: "/chatinfo",
                //     // query: {
                //     //     data: JSON.stringify(tmpData)
                //     // }
                //     query: {
                //         id: tmpData.bdid,
                //         name:tmpData.name
                //     }
                // });

            }
        },
        mounted() {
            this.getAddressList();
        },
        beforeUpdate() {

        },
        computed: {},


    }
</script>
